<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件prop使用note</title>
</head>
<body>
    <!-- prop---property
        用于 父组件 向 子组件 传值，注意是单向的！！！！！
    -->

    <div id="app">
        <father></father>
    </div>

    

    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
        Vue.component('father',{
            // 注意 <child :message = "FaMsg" name="zhangsan">标签中，FaMsg属于data数据须动态绑定，name则无需
            // 另外注意 传值时，除了字符串类型，其他类型数据需要绑定v-bind传输 来 保持源数据类型！！
            // 例如：:age="20" :flag="ture",如不绑定v-bind，将会被视为字符串类型数据！！！！
            template:`
            <div>
                <h1>father</h1>
                <span>{{FaMsg}}</span>&nbsp;
                <span>{{computedMsg}}</span>&nbsp;
                <child :message="FaMsg" name="zhangsan" cc="computedMsg" :age="20" :flag="true"></child>
                </div>
            `,
            data(){
                return {
                    FaMsg:"hi! ",
                    famsg:"hhh ",
                    
                }
            },
            computed:{
                computedMsg(){
                    return this.famsg = this.famsg + 'OO';
                }
            }
        });
        
        Vue.component('child',{
            // 接受，组件之间传值使用, “ 数组 ” 来接收传输的“ 数据名 ”
            // 注意 props 加s啊！！
            props:["message","name","cc","age","flag"],
            // 反字符号，数字1 左边的符号！！！！
            template:`
            <div>
                <h1>child</h1>
                <p onclick="one()">{{message}}</p>&nbsp;
                <p>{{name}}&nbsp;{{typeof name}}</p>&nbsp;
                <p>{{age}}&nbsp;{{typeof age}}</p>&nbsp;
                <p>{{flag}}&nbsp;{{typeof flag}}</p>&nbsp;
                <p>{{cc}}</p>&nbsp;
            </div>
            `,
        });


        new Vue({
            el:"#app",
            data(){
                return {
                    msg:"hi"
                }
            }
        })
    </script>
    <script>
        function one(){ 
            
    	    console.log(typeof message) 
    }
    </script>
    
</body>
</html>